import * as ZRENDER from 'zrender'

//获取容器
const domApp = document.getElementById('app')

// 初始化 ZRender 实例
let zr = ZRENDER.init(domApp)
window.zr = zr
window.zrender = ZRENDER
//创建一个容器
let groupTime = new ZRENDER.Group()
let rectTime = new ZRENDER.Rect({
  rectHover:true,
  style:{
    fill:'rgba(0,0,0,0)',
  },
  x:100,
  y:0,
  z:1,
  shape:{
    width:800,
    height:100
  },
  onclick(e){
    createLightLine({left:e.event.zrX})
  },
  onmouseover(){
    if(document.getElementsByClassName('custom-tooltip') && document.getElementsByClassName('custom-tooltip').length > 0){
      document.getElementsByClassName('custom-tooltip')[0].remove()
    }
    createTooltip()
  },
  onmousemove(e){ //添加鼠标移动
    setTooltipStyle({top:e.event.zrY,left:e.event.zrX, text:`<span style="color: aqua;font-size: 20px;">top:${e.event.zrY}， left:${e.event.zrX}</span>`})
  },
  onmouseout(){ //鼠标移出删除提示框
    if(document.getElementsByClassName('custom-tooltip') && document.getElementsByClassName('custom-tooltip').length > 0){
      document.getElementsByClassName('custom-tooltip')[0].remove()
    }
  }
})
groupTime.add(rectTime)

// 创建图形实例
const line = new ZRENDER.Line({
  shape: {
    x1:100,
    y1:50,
    x2:900,
    y2:50
  },
  style: {
    lineWidth:2,
    stroke: '#000000' // 设置线条颜色为黑色
  }
});

// 假设已经有一个ZRender实例zr，‌将其添加到画布上
// zr.add(line);
groupTime.add(line)

// 创建图形实例
let lineList = []
for(let i = 0;i<=20;i++){
  const line = new ZRENDER.Line({
    shape: {
      x1:i*40 + 100,
      y1:50,
      x2:i*40 + 100,
      y2:i%2 === 0 ? 40:10
    },
    style: {
      lineWidth:2,
      stroke: '#000000' // 设置线条颜色为黑色
    }
  });
  lineList.push(line)
}
lineList.forEach(item => {
  groupTime.add(item)
})

zr.add(groupTime)

//创建快进和回退按钮
let kuaijinImage = new ZRENDER.Image({
  style:{
    width:80,
    height:30,
    image:'./assets/svg/ai19.svg'
  },
  x:900,
  y:30,
  onclick(){
    groupTime._children.some(item => {
      if(item.id === 9999){
        item.attr({
          shape:{
            x1:item.shape.x1 + 10,
            y1:50,
            x2:item.shape.x2 + 10,
            y2:0
          }
        })

      }
    })
  }
})
groupTime.add(kuaijinImage)
let huituImage = new ZRENDER.Image({
  style:{
    width:80,
    height:30,
    image:'./assets/svg/huitui-000.svg'
  },
  x:30,
  y:30,
  onclick(){
    groupTime._children.some(item => {
      if(item.id === 9999){
        item.attr({
          shape:{
            x1:item.shape.x1 - 10,
            y1:50,
            x2:item.shape.x2 - 10,
            y2:0
          }
        })

      }
    })
  }
})
groupTime.add(huituImage)
/**
* @Author: zhangjinhao
* @Date 2024-08-13 13:30:03
* @Describe: 创建提示框
*/
let tooltip = null
function createTooltip() {
  tooltip = document.createElement('div')
  tooltip.classList.add('custom-tooltip');
  document.body.appendChild(tooltip);
}

createTooltip()

function setTooltipStyle({top,left,text}){
  tooltip.style.top = top + 'px'
  tooltip.style.left = left + 40 + 'px'
  tooltip.innerHTML = text
}
/**
* @Author: zhangjinhao
* @Date 2024-08-13 13:59:43
* @Describe: 创建高亮时间轴
*/

function createLightLine({left}){
  groupTime._children.some(item => {
    if(item.id === 9999){
      groupTime.remove(item)
    }
  })
  const line = new ZRENDER.Line({
    id:9999,
    shape: {
      x1:left,
      y1:50,
      x2:left,
      y2:0
    },
    style: {
      lineWidth:2,
      stroke: 'aqua' // 设置线条颜色为黑色
    }
  });
  groupTime.add(line)
}